<template>
  <div
    class="pagelist_s"
    v-if="PageLists"
  >
  <!-- 多照片 -->
    <div
      class="list"
      v-for="item in PageLists"
      :key="item.id"
    >
      <div
        class="img_3"
        v-if="item.images.length >= 3"
       >
        <h3 @click="$router.push({path:'/post/detail',query:{
            id : item.id
          }})">{{item.title}}</h3>
        <div class="content">
          <p
            v-html="item.summary"
            @click="$router.push({path:'/post/detail',query:{
            id : item.id
          }})"
          ></p>
          <div
            class="img_list"
            @click="$router.push({path:'/post/detail',query:{
            id : item.id
          }})"
          >
            <div
              class="img"
              v-for="(item,index) in item.images"
              :key="index"
            >
              <img
                :src="item"
                alt=""
              >
            </div>
          </div>
          <div class="userinfo">
            <div class="user">
              <span class="el-icon-location-outline">{{item.cityName}}&nbsp;&nbsp;by</span>
              <div class="info">
                <div>
                  <img
                    :src="$axios.defaults.baseURL + item.account.defaultAvatar"
                    alt=""
                  >
                </div> <span>{{item.account.nickname}}</span>
              </div>
              <div class="wacth el-icon-view">&nbsp;{{item.watch}}</div>
            </div>
            <div class="zhan"><span>{{item.like}}</span> 赞</div>
          </div>
        </div>
      </div>
      <!-- 单照片 -->
      <div
        class="img_1"
        v-if="item.images.length<3 && item.images.length>0 "
      >
        <div class="left_img"><img
            :src="item.images[0]"
            alt=""
            @click="$router.push({path:'/post/detail',query:{
            id : item.id
          }})"
          ></div>
        <div class="right_content">
          <h3 @click="$router.push({path:'/post/detail',query:{
            id : item.id
          }})">{{item.title}}</h3>
          <div class="content">
            <p
              v-html="item.summary"
              @click="$router.push({path:'/post/detail',query:{
            id : item.id
          }})"
            ></p>
          </div>
          <div class="userinfo">
            <div class="user">
              <span class="el-icon-location-outline">{{item.cityName}}&nbsp;&nbsp;by</span>
              <div class="info">
                <div>
                  <img
                    :src="$axios.defaults.baseURL + item.account.defaultAvatar"
                    alt=""
                  >
                </div> <span>{{item.account.nickname}}</span>
              </div>
              <div class="wacth el-icon-view"><span>&nbsp;{{item.watch || 0}}</span></div>
            </div>
            <div class="zhan"><span>{{item.like || 0}}</span> 赞</div>
          </div>
        </div>
      </div>
      <div
        class="img_3"
        v-if="item.images.length == 0"
      >
        <h3 @click="$router.push({path:'/post/detail',query:{
            id : item.id
          }})">{{item.title}}</h3>
        <div class="content">
          <p
            v-html="item.summary"
            @click="$router.push({path:'/post/detail',query:{
            id : item.id
          }})"
          ></p>
          <div class="userinfo">
            <div class="user">
              <span class="el-icon-location-outline">{{item.cityName}}&nbsp;&nbsp;by</span>
              <div class="info">
                <div>
                  <img
                    :src="$axios.defaults.baseURL + item.account.defaultAvatar"
                    alt=""
                  >
                </div> <span>{{item.account.nickname}}</span>
              </div>
              <div class="wacth el-icon-view"><span>&nbsp;{{item.watch || 0}}</span></div>
            </div>
            <div class="zhan"><span>{{item.like || 0}}</span> 赞</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 获取列表详情
  props: ["PageLists"],
};
</script>

<style lang="less" scoped>
.pagelist_s {
  .list {
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    .img_3 {
      h3 {
        cursor: pointer;
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 20px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        background-image: linear-gradient(to right,#f9957f,hsl(130, 53%, 53%));
        -webkit-background-clip: text;
        color: transparent;
        &:hover {
          background-image: linear-gradient(to bottom right,rgb(12, 119, 161),rgb(247, 68, 98));
          -webkit-background-clip: text;
          color: transparent;
        }
      }
      .content {
        P {
          cursor: pointer;
          line-height: 26px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          text-indent: 2em;
          color: #555;
        }
        .img_list {
          cursor: pointer;
          padding-top: 10px;
          display: flex;
          width: 700px;
          overflow: hidden;
          justify-content: space-between;
          margin-bottom: 20px;
          .img {
            width: 220px;
            height: 150px;
            overflow: hidden;
            img {
              height: 100%;
              width: 100%;
              object-fit: cover;
            }
          }
        }
      }
    }
    .img_1 {
      display: flex;
      height: 150px;
      .left_img {
        width: 220px;
        height: 150px;
        overflow: hidden;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
      .right_content {
        cursor: pointer;
        width: 480px;
        padding-left: 10px;
        h3 {
          cursor: pointer;
          font-size: 18px;
          font-weight: normal;
          margin-bottom: 15px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          background-image: linear-gradient(to right,#f9957f,hsl(130, 53%, 53%));
          -webkit-background-clip: text;
          color: transparent;
          &:hover {
            background-image: linear-gradient(to bottom right,rgb(12, 119, 161),rgb(247, 68, 98));
            -webkit-background-clip: text;
            color: transparent;
          }
        }
        .content {
          P {
            cursor: pointer;
            line-height: 26px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            text-indent: 2em;
            color: #555;
            margin-bottom: 12px;
          }
        }
      }
    }
  }
  .userinfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 500;
    .user {
      display: flex;
      align-items: center;
      height: 22px;
      font-size: 12px;
      color: #777;
      .info {
        display: flex;
        padding: 0 8px;
        div {
          margin-right: 5px;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          img {
            width: 100%;
            height: 100%;
          }
        }
        span {
          color: orange;
        }
      }
      .watch {
        padding-left: 4px;
      }
    }
  }
  .zhan {
    color: orange;
  }
}
</style>